<template>
  <div>
    <h2>事件绑定指令</h2>
    <!-- 事件绑定指令语法 v-on:事件名="处理程序" v-on:可以简化成 @ -->
    <!-- <button v-on:事件名="处理程序">按钮</button> -->
    <!-- <button @事件名="处理程序">按钮</button> -->
    <p>{{age}}</p>
    <!-- 事件处理程序，如果代码非常简单，直接写在<template> 这个区域即可 -->
      <!-- 处理程序，代码只能使用vue中定义好的data 数据 或methods 方法 -->
    <button @click="age++">+1</button>
    <!-- 事件处理程序，如果代码非常多，可使用方法，方法必须定义到 和data平级的methods中 -->
    <button @click="changeAge">按钮</button>
  </div>
</template>

<script>
export default {
data () {
  return {
    age:20
  }
},
// methods 是储存方法的
methods: {
  changeAge () {
    // vue中，data数据，methods方法....都是通过this 直接找【这是vue的固定语法】
    this.age--
    console.log(123)
  }
}
}
</script>

<style>

</style>